<template>
	<div class="category">
		<h3>
			类型管理
			<button @click="cateadd()">添加类型</button>
		</h3>
		<div class="cate-contain">
			<div class="left3">
				<el-container>
					<el-main>
						<el-table ref='checkall' :data='admList' style='width: 95%;'>
							<!-- 名称 -->
							<el-table-column prop='id'></el-table-column>
							<el-table-column prop='type'></el-table-column>
							<el-table-column prop='but'>
								<el-button size="mini" background-color='#314057' @click="mod(id)">修改</el-button>
							</el-table-column>
						</el-table>
					</el-main>
				</el-container>
			</div>
		</div>
		<!-- 右侧 -->
		<div class="right">
			<h4>{{right}}</h4>
			<p>
				<label>类型ID:</label>
				<!-- 将id输入框设置为：只读 -->
				<input type="number" readonly  v-model="cateid"/>
			</p>
			<p>
				<label>类型名称：</label>
				<input type="text" v-model.lazy.trim="catetype" />
			</p>
			<p>
				<button @click="postData()">{{right}}提交</button>
			</p>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Categoty',
		data(){
			return{
				admList:[],		//用来接收异地请求的数据
				right:'浏览中',	//状态
				cateid:'',		//类型id
				catetype:''		//类型名称
			}
		},
		methods:{
			//修改按钮
			mod(x){
				this.right = '修改'
				//直接从admList数组内提出指定下标的数据
				this.cateid = this.admList[x].id
				this.catetype = this.admList[x].type
			},
			// 点击切换添加界面
			cateadd(){
				this.title = '添加类型';
				this.cateid = 0;
			},
			//提交向后台的数据库提交输入框的数据  【post请求】
			postData(){
				//备份
				let that = this
				//判断名称不为空
				if(this.catetype != '' && this.cateid !==''){
					//发起post请求：请求地址 + 提交数据 + 表头配置
					/*
						请求地址：/api/adm/type/add
						提交的数据：this.$qs.stringify(data)
						配置：headers对象
					*/
				   //将提交的数据打包
				   let data = {
					   id : this.cateid,
					   type : this.catetype
				   }
					this.axios.post('/api/adm/type/add' , this.$qs.stringify(data) , {
						//表头配置：告知服务器本次请求的方式以及编码格式
						headers:{'Content-Type' : 'application/x-www-form-urlencoded ; charset=UTF-8'},
					}).then((res)=>{
						if(res.status === 200){
							//将心获取的数据重新赋值给admList
							that.admList = res.data.data
							//清空输入框
							that.cateid = '',
							that.catetype = '',
							that.right = '浏览中'
						}
					}).catch((error)=>{
						console.log(error)
					})
				}
				
			}
		},
		created(){
			//发起异步请求
			this.axios.get('/api/adm/type/findAll').then((res)=>{
				//判断状态
				if(res.status === 200){
					//向表格渲染数据
						this.admList = res.data.data
				}
			}).catch((error)=>{
				console.log(error)
			})
		}
	}
</script>

<style scoped>
.category{
	width: 70%;
	height: 700px;
	border: 1px solid skyblue;
	background-color: white;
	margin-left: 30rem;
}
.category h3{
	line-height: 55px;
	text-indent: 1em;
	font-size: 22px;
	align-items: center;
	color: black;
}
.category h3 button{
	border: none;
	height: 35px;
	margin-right: 20px;
	border-radius: 0.5rem;
}
.cate-contain .left3 tr td:nth-child(1){
	width: 60px;
	text-align: center;
}
.cate-contain .left3 tr td:nth-child(2){
	width: 500px;
	text-indent: 1em;
}
.cate-contain .left3 tr td:nth-child(3){
	width: 20%;
	text-align: center;
}
.cate-contain .right{
	width: 300px;
	height: 200px;
	background-color: skyblue;
	margin-top: -8rem;
	text-indent: 1em;
	float: right;
	margin-left: -100px;
}
</style>
